<template>
  <section>
    <div v-show="isShow">
      <div>
        <aside
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <div>
            种类选择：
            <el-select
              v-model="categoryId"
              placeholder="请选择种类"
              @change="changeCategory"
            >
              <el-option
                v-for="item in categoryList"
                :key="item._id"
                :label="item.name"
                :value="item._id"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
            type="primary"
            size="default"
            icon="el-icon-plus"
            @click="isShow = false"
            >添加</el-button
          >
        </aside>
        <el-table :data="typeList" border stripe>
          <el-table-column fixed label="序号" width="80px" align="center">
            <template v-slot="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column fixed prop="carName" label="名字" width="150">
          </el-table-column>
          <el-table-column prop="img" label="图片" width="150">
            <template slot-scope="{ row }">
              <el-image :src="row.img" fit="cover" :lazy="true"></el-image>
            </template>
          </el-table-column>
          <!-- 类别 -->
          <el-table-column prop="distance" label="行驶距离" width="150">
          </el-table-column>
          <el-table-column prop="rent" label="日租金" width="150">
          </el-table-column>
          <el-table-column prop="structure" label="车身结构	" width="150">
          </el-table-column>
          <el-table-column prop="level" label="级别" width="150">
          </el-table-column>
          <el-table-column prop="size" label="长/宽/高 (mm)" width="150">
          </el-table-column>
          <el-table-column prop="manufacturer" label="制造商" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="{ row }">
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="editData(row)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteItem(row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-show="!isShow">
      <el-form ref="tForm" :model="tForm" label-width="100px">
        <el-form-item label="类型名称">
          <el-input v-model="tForm.carName" placeholder="类型名称"></el-input>
        </el-form-item>
        <el-form-item label="类型图片">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/upload"
            :on-success="handleSuccess"
            :show-file-list="false"
          >
            <img v-if="tForm.img" :src="tForm.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="种类">
          <el-select v-model="tForm.category_id" placeholder="请选择车的种类">
            <el-option
              v-for="item in categoryList"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行驶距离">
          <el-input
            v-model="tForm.distance"
            placeholder="例如：300公里"
          ></el-input>
        </el-form-item>
        <el-form-item label="日租金">
          <el-input
            v-model.number="tForm.rent"
            placeholder="例如：600"
          ></el-input>
        </el-form-item>
        <el-form-item label="结构">
          <el-input
            v-model="tForm.structure"
            placeholder="例如：3门4座2厢车"
          ></el-input>
        </el-form-item>
        <el-form-item label="级别">
          <el-input v-model="tForm.level" placeholder="例如：微型车"></el-input>
        </el-form-item>
        <el-form-item label="长/宽/高 (mm)">
          <el-input
            v-model="tForm.size"
            placeholder="例如：3200*1670*1550"
          ></el-input>
        </el-form-item>
        <el-form-item label="制造商">
          <el-input
            v-model="tForm.manufacturer"
            placeholder="制造商"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitData">保存</el-button>
          <el-button @click="cancelTypeForm">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script>
export default {
  name: "Type",
  data() {
    return {
      isShow: true,
      // 类别Id
      categoryId: "",
      // 种类列表
      typeList: [],
      // 类型列表
      categoryList: [],
      // 类型收集数据
      tForm: {
        carName: "",
        distance: "",
        manufacturer: "",
        rent: "",
        img: "",
        structure: "",
        level: "",
        size: "",
        category_id: "",
      },
      // 上传图片预览
      imageUrl: "",
    };
  },
  mounted() {
    this.getCategoryList();
  },
  methods: {
    // 获取所有分类
    async getCategoryList() {
      let ret = await reqCategoryList();
      if (ret.code == 200) this.categoryList = ret.data;
    },
    // 改变分类
    async changeCategory(value) {
      let ret = await reqTypeList(value);
      if (ret.code == 200) this.typeList = ret.data;
    },
    // 照片图片上传成功的回调
    handleSuccess(response, file, fileList) {
      this.tForm.img = response.data.url;
    },
    async submitData() {
      let ret = await reqAddOrUpdateType(this.tForm);
      let tip = this.tForm._id ? "类型修改成功" : "类型上传成功";
      if (ret.code == 200) {
        if (this.categoryId) this.changeCategory(this.categoryId);
        this.$message.success(tip);
        this.resetData();
        this.isShow = true;
      }
    },
    editData(item) {
      this.isShow = false;
      this.tForm = { ...item };
      this.tForm.category_id = this.tForm.category_id._id;
    },
    resetData() {
      this.tForm = {
        carName: "",
        distance: "",
        manufacturer: "",
        rent: "",
        img: "",
        structure: "",
        level: "",
        size: "",
        category_id: "",
      };
    },
    cancelTypeForm() {
      this.resetData();
      this.isShow = true;
    },
    deleteItem(row) {
      this.$confirm(`你确定删除${row.carName}?`, "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //当用户点击确定按钮的时候会出发
          //向服务器发请求
          let result = await reqDeleteType({ id: row._id });
          //如果删除成功
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if (this.categoryId) this.changeCategory(this.categoryId);
          }
        })
        .catch(() => {
          //当用户点击取消按钮的时候会触发
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
